<template>
  <div class="container">
    <div class="billboard">
      <div class="billboard-content">
        <h2 class="each-billboard">云音乐特色榜</h2>
        <ul>
          <li
            :class="{
              active: item.id === songSheetId,
            }"
            v-for="(item, index) in FeaturedList"
            @click="getSong(item.id, index)"
          >
            <img v-lazy="item.coverImgUrl" alt="飙升榜" />
            <div>
              <p class="Ranking">{{ item.name }}</p>
              <p class="Ranking-status">{{ item.updateFrequency }}</p>
            </div>
          </li>
        </ul>
        <h2 class="each-billboard">全球媒体榜</h2>
        <ul>
          <li
            :class="{
              active: item.id === songSheetId,
            }"
            v-for="(item, index) in MediaList"
            @click="getSong(item.id, index + 4)"
          >
            <!-- <a href=""> -->
            <img v-lazy="item.coverImgUrl" alt="飙升榜" />
            <div>
              <p class="Ranking">{{ item.name }}</p>
              <p class="Ranking-status">{{ item.updateFrequency }}</p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="billboard-information">
      <div class="information-top">
        <div style="display: flex">
          <div class="img-border">
            <img v-lazy="playlist.coverImgUrl" alt="" />
          </div>
          <div class="SongList-play">
            <h2>{{ playlist.name }}</h2>
            <p>
              <i></i> <span>最近更新：10月13日 </span>
              <span>{{ stateList[stateValue] }}</span>
            </p>
            <div style="display: flex">
              <a href="javaScript:;" class="play"
                ><i class="iconfont icon-bofang"></i> 播放
              </a>
              <a href="javaScript:;" class="addTo"
                ><i class="iconfont icon-zengjia1"></i>
              </a>
              <a href="javaScript:;" class="preservation"
                ><i class="icon-xinxifill"></i> (3981355)
              </a>
              <a href="javaScript:;" class="forward"
                ><i class="icon-xinxifill"></i> (13035)
              </a>
              <a href="javaScript:;" class="download"
                ><i class="iconfont icon-xinxifill"></i> 下载
              </a>
              <a href="javaScript:;" class="comment" @click="getFocus"
                ><i class="iconfont icon-xinxifill"></i> (215439)
              </a>
            </div>
          </div>
        </div>
      </div>
      <div class="information-list">
        <div class="song-information">
          <div style="position: relative" class="">
            <h3>歌曲列表</h3>
            <span>100首歌</span>
          </div>
          <div class="play-frequency">播放：5215256576次</div>
        </div>
        <div class="song-exhibition">
          <table border-collapse:collapse>
            <thead>
              <tr>
                <th class="SeriaNo"></th>
                <th class="title">标题</th>
                <th class="duration">时长</th>
                <th class="singer">歌手</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="(item, index) in songSheetList"
                @mouseover="TrMovein(item.id)"
                @mouseout="RemoveHide"
              >
                <td class="SeriaNo" style="font-size: 12px">{{ index + 1 }}</td>
                <td class="title">
                  <div class="song-title">
                    <img v-lazy="item.al.picUrl" alt="" v-if="index < 3" />

                    <p class="title-yihan">
                      <i
                        class="iconfont icon-bofang"
                        @click="musicPlaying(item.id)"
                      ></i>
                      <a href="javaScript:;">{{ item.name }}</a
                      ><span></span>
                    </p>
                  </div>
                </td>
                <td class="duration" style="font-size: 12px">
                  <span v-if="isShowId !== item.id">{{
                    fiterTime(item.dt)
                  }}</span>
                  <div style="width: 83px" v-else>
                    <i class="iconfont icon-bofang"></i>
                    <i class="iconfont icon-bofang"></i>
                    <i class="iconfont icon-bofang"></i>
                    <i class="iconfont icon-bofang"></i>
                  </div>
                </td>
                <td class="singer" style="font-size: 12px">
                  {{ item.ar[0].name }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <div class="information-discuss">
        <div class="song-information">
          <h3>评论</h3>
          <span>共215441条评论</span>
        </div>
        <div class="discuss-content">
          <div class="discuss-top">
            <div class="discuss-img">
              <img
                src="http://p3.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg?param=50y50"
                alt=""
              />
            </div>
            <div style="flex: 1">
              <textarea
                name=""
                id=""
                cols="30"
                rows="10"
                v-model="textareaValue"
                ref="itext"
              ></textarea>
            </div>
          </div>
          <div class="discuss-button">
            <div></div>
            <a href="javaScript:;" class="sendOut" @click="pubomment">评论</a>
          </div>
          <div class="wonderful-Comments">
            <span>精彩评论</span>
            <p class="verification-text" v-if="isShow">
              发表评论字数不能超过140或者不能输入为空
            </p>
          </div>
          <ul class="discuss-list">
            <li v-for="(item, index) in commentsList">
              <img v-lazy="item.user.avatarUrl" alt="头像" />
              <div>
                <p>
                  <span>{{ item.user.nickname }}</span> {{ item.content }}
                </p>
                <p class="publish-time">
                  {{ dayjs(item.time).format("YYYY.MM.DD hh:mm:ss") }}
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: "XRanking",
};
</script>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from "vue";
// import request from "@/utils/request";
import dayjs, { Dayjs } from "dayjs";
import {
  getSongListApi,
  getsongSheetApi,
  getsongSheeInfApi,
  getCommentListApi,
  getLiSongsheetListApi,
  getLisingleSongsheetApi,
  sendingCommentApi,
} from "@/api/discoverMusic/ranking";
import type {
  SongListArray,
  tracksArray,
  playlistObj,
  commentsArray,
  playSonginfoObj,
} from "@/api/discoverMusic/model/ranking";
import { ElMessage } from "element-plus";
import { useSongPlaying } from "@/stores/songPlaying";

const store = useSongPlaying();

const FeaturedList = ref<SongListArray>([]);
const MediaList = ref<SongListArray>([]);

const songSheetList = ref<tracksArray>([]);

const songSheetId = ref(19723756);

// const songSheetSingle = ref(0);

// const songSheetPages = ref(100);

const playlist = ref<any>({});

const stateList = ref<string[]>([]);

const stateValue = ref(0);

const commentsList = ref<commentsArray>([]);

// 评论文本域  的value值
const textareaValue = ref("");

const isShow = ref(false);
// const songStatus = ref();

const isShowId = ref(0);

const LisongSheetList = ref<Number[]>([]);

const Liidentification = ref(0);

const playSonginfo = ref<playSonginfoObj>();

const itext = ref();

onMounted(async () => {
  const res = await getSongListApi();
  console.log(res);
  FeaturedList.value = res.list.splice(0, 4);
  MediaList.value = res.list.splice(5);
  FeaturedList.value.forEach((item) => {
    stateList.value.push(item.updateFrequency);
  });
  MediaList.value.forEach((item) => {
    stateList.value.push(item.updateFrequency);
  });

  songSheetId.value = FeaturedList.value[0].id;
  // getSonglistApifz();
  getSonglistInf();
  getCommentList();
});

// 封装歌曲列表请求
// const getSonglistApifz = async () => {
//   const res = await getsongSheetApi(
//     songSheetId.value,
//     songSheetSingle.value,
//     songSheetPages.value
//   );
//   songSheetList.value = res.songs;
// };

// 封装歌曲排行榜信息
const getSonglistInf = async () => {
  const res = await getsongSheeInfApi(songSheetId.value);
  console.log(res);
  songSheetList.value = res.playlist.tracks.splice(0, 30);
  playlist.value = res.playlist;
};

// 获取歌曲的回调函数
const getSong = (id: number, index: number) => {
  songSheetId.value = id;
  // getSonglistApifz();
  getSonglistInf();
  stateValue.value = index;
  getCommentList();
};

// 获取评论列表
const getCommentList = async () => {
  const res = await getCommentListApi(songSheetId.value);
  commentsList.value = res.comments;
  console.log(res.comments);

  // console.log(commentsList.value);
  // console.log(1);
};

// 评论按钮触发的回调函数
const pubomment = async () => {
  if (textareaValue.value.length < 140 && textareaValue.value) {
    const res = await sendingCommentApi(
      1,
      6,
      "A_PL_0_19723756",
      textareaValue.value
    );
    console.log(1);

    getCommentList();
    ElMessage.success("评论成功");
    textareaValue.value = "";
    isShow.value = false;
  } else {
    isShow.value = true;
  }
};

const fiterTime = (time: number | string | Date | Dayjs | null | undefined) => {
  return dayjs(time).format("mm:ss");
};

const TrMovein = (id: number) => {
  // console.log(id);
  isShowId.value = id;
};

const getFocus = () => {
  itext.value.focus();
};

const RemoveHide = () => {
  isShowId.value = 0;
};

const musicPlaying = (id: number) => {
  store.getsongList(id);
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f5f5f5;
}

.billboard-information {
  background-color: #ffffff;
}

.billboard {
  background-color: #f9f9f9;
}
table {
  border-collapse: collapse;
}
/* 左侧路由导航  开始*/
.container {
  width: 982px;
  align-items: center;
  display: flex;
  margin: 0 auto;
}
.billboard {
  width: 238px;
  height: 1000px;
  border-right: 1px solid #d3d3d3;
  border-left: 1px solid #d3d3d3;
}

.each-billboard {
  padding: 0 10px 12px 15px;
  font-size: 14px;
  color: #000;
  font-family: "宋体";
}
.billboard-content {
  margin-top: 40px;
}

.billboard-content img {
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.billboard-content li {
  display: flex;
  padding: 10px 0 10px 20px;
}
.active {
  background-color: #e6e6e6;
}
.billboard-content p {
  font-size: 12px;
}

.Ranking {
  color: #000;
  margin-bottom: 7px;
}
.Ranking-status {
  color: #999;
}
.billboard-content ul {
  margin-bottom: 20px;
}
/* 左侧路由导航  结束*/

/* 右侧出口 开始*/
.billboard-information {
  /* flex: 1; */
  width: 774px;
  height: 1000px;
}
.img-border {
  width: 158px;
  padding: 3px;
  border: 1px solid #cccccc;
}
.information-top {
  padding: 40px;
  height: 238px;
}
.information-top img {
  width: 150px;
  height: 150px;
}
.SongList-play {
  margin-left: 30px;

  flex: 1;
  height: 158px;
}
.SongList-play h2 {
  line-height: 24px;
  font-size: 20px;
  font-weight: normal;
  margin: 15px 0 13px 0;
}

.SongList-play p {
  display: flex;
  font-size: 12px;
  margin-bottom: 30px;
}
.SongList-play p span:nth-child(3) {
  color: #999;
}
.SongList-play p i {
  display: block;
  width: 14px;
  height: 14px;
  background-color: red;
}

.SongList-play a {
  display: inline-block;
  font-size: 12px;
  text-align: center;
  line-height: 31px;
  height: 31px;
  border: 1px solid #c3c3c3;
  border-radius: 3px;
  margin-right: 5px;
  cursor: pointer;
}

.SongList-play .play {
  background-color: #1e6fbf;
  width: 66px;
  margin-right: 0px;
  border: 0px;
  color: #f5f5f5;
}
.SongList-play .addTo {
  background-color: #1e6fbf;
  width: 31px;
  border: 0px;
  color: #f5f5f5;
}
.SongList-play .preservation {
  width: 89px;
}
.SongList-play .forward {
  width: 77px;
}
.SongList-play .download {
  width: 59px;
}
.SongList-play .comment {
  width: 83px;
}

.information-list {
  padding: 0 30px 40px 40px;
}
/* 下  开始 */
.information-list h3,
.information-comment h3 {
  color: #333333;
  font-size: 20px;
  line-height: 28px;
  font-weight: normal;
}
.song-information {
  display: flex;
  justify-content: space-between;
}
.song-information span {
  display: block;
  font-size: 12px;
  margin-left: 20px;
  margin-top: 10px;
}
.song-exhibition th {
  background-color: #f0f0f0;
  border-left: 1px solid #d9d9d9;
  padding: 0;
  margin: 0;
  height: 34px;
}
.song-exhibition td {
  padding: 6px 10px;
  height: 30px;
}
.song-exhibition tr:nth-child(2),
.song-exhibition tbody tr:nth-child(1),
.song-exhibition tr:nth-child(3) {
  height: 70px;
}
.song-exhibition tr:nth-child(2n-1) {
  background-color: #f7f7f7;
}
.SeriaNo {
  width: 78px;
}
.title {
  width: 326px;
}
.duration {
  width: 91px;
}
.singer {
  width: 175px;
}
.play-frequency {
  position: relative;
  padding-top: 7px;
  font-size: 12px;
}
.information-discuss {
  padding: 40px 30px 40px 40px;
}

.discuss-img {
  margin-right: 10px;
}

.discuss-top {
  display: flex;
}
.discuss-top textarea {
  width: 100%;
  height: 60px;
  padding: 6px;
}

.discuss-button {
  padding-left: 60px;
  display: flex;
  justify-content: space-between;
}
.discuss-button div {
  width: 20px;
  height: 20px;
  background-color: green;
}
.discuss-button a {
  display: block;
  width: 46px;
  height: 25px;
  background-color: #2d7dca;
  text-align: center;
  line-height: 25px;
  font-size: 12px;
  color: #ffffff;
  border-radius: 3px;
}

.wonderful-Comments {
  /* padding-top: 20px; */
  position: relative;
  margin-top: 20px;
  height: 21px;
  border-bottom: 1px solid #cfcfcf;
}
.wonderful-Comments span {
  font-size: 12px;
  font-weight: bold;
}

.discuss-list li {
  display: flex;
  border-top: 1px dotted rgb(204, 204, 204);
  padding: 15px 0;
}
.discuss-list li:nth-child(1) {
  border: 0px;
}
.discuss-list li img {
  margin-right: 10px;
  width: 50px;
  height: 50px;
}
.discuss-list li p {
  font-size: 12px;
}
.discuss-list li span {
  color: #0c73c2;
}
.publish-time {
  color: rgb(153, 153, 153);
  margin-top: 14px;
}

.song-title {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
}
.song-title p {
  font-size: 12px;
  display: flex;
  flex: 1;
}
.song-title p span {
  color: rgb(153, 153, 153);
}
.song-title i {
  margin-left: 10px;
  display: block;
  width: 17px;
  height: 20px;
  margin-right: 10px;
  /* background-color: green; */
}

.song-title img {
  width: 50px;
  height: 50px;
}

.song-title .title-yihan {
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.information-discuss {
  padding-bottom: 200px;
}

.information-discuss ul {
  margin-bottom: 20px;
}

.discuss-content {
  position: relative;
}

.verification-text {
  display: block;
  position: absolute;
  color: red;
  left: 350px;
  top: -42px;
  /* bottom: -500px; */
  font-size: 14px;
}
i {
  display: inline-block;
  width: 17px;
  height: 20px;
  cursor: pointer;
}
/* 下  结束 */
/* 右侧出口 结束*/
</style>
